<template>
  <div
    class="list"
    :id='id'
  >
    <div class="label">所属机构：</div>
    <div class="list-fold-con">
      <div
        v-if="list.length > 0"
        :class="`item ${isAll && 'active'}`"
        @click="handleClick('all')"
      >全部</div>
      <div
        v-for="(e,i) in list"
        :key="i"
        :class="`item ${chooseIndex.includes(e.id) && 'active'}`"
        @click="handleClick('',e.id)"
        v-show="isFold || (i - 1) < lineNum"
        :style="`max-width:${itemWidth};`"
      >{{e.name}}</div>
    </div>
    <div
      class="fold"
      @click="handleFold"
      v-show=" list.length > lineNum "
    >
      <span>{{isFold?'收起':'展开'}}</span>
      <i :class="isFold?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    list: {
      type: Array,
      default: () => new Array(24).fill('').map((_, h) => ({ id: h, name: `类目${h}` }))
    },
    itemWidth: {
      type: Number,
      default: () => 50
    },
    // list容器的id 必传 不能重复
    id: {
      type: String,
      require: true,
      default: () => 50
    },
  },
  data () {
    return {
      chooseIndex: [],
      isAll: false,// 是否点击全部
      isFold: false,// 展开全部true 收起
      lineNum: 0,// 一行的个数
    }
  },
  methods: {
    handleClick (type, id) {
      let ids = this.chooseIndex;
      // console.log('www', ids);
      // 全部
      if (type === 'all') {
        ids = this.isAll ? [] : this.list.map(e => e.id);
        this.isAll = !this.isAll;
      } else {
        // 个体
        // 如果存在 移除
        if (this.chooseIndex.includes(id)) {
          ids = ids.filter(e => e !== id);
          // console.log('ww2222w', ids);
        } else {
          // 不存在 添加
          ids.push(id);
          //  console.log('ww444w', ids);
        }
      }
      ids = Array.from(new Set(ids));
      this.chooseIndex = ids;
      this.$emit('onChange', ids);
    },
    handleFold () {
      this.isFold = !this.isFold;
    },
    handleResize () {
      const width = document.getElementById(this.id).offsetWidth;
      this.lineNum = Math.floor((width - 80 * 2 - this.itemWidth) / (this.itemWidth + 10 + 20));
      console.log('www', this.id, this.lineNum);
    }
  },
  mounted () {
    this.handleResize();
    // 解决多个onresize 失效的问题
    window.addEventListener('resize',() => this.handleResize(), false)
    // window.onresize = (() => this.handleResize());
  },
  destroyed () {
    // window.onresize = null;
    window.removeEventListener('resize', this.handleResize, false)
  }
}
</script>
<style scoped>
.list {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label {
  position: absolute;
  top: 0;
}
.list-fold-con {
  flex: 1;
  /* background-color: red; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 80px;
}
/* .item + .item {
  margin-left: 20px;
} */
.item {
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 10px;
  margin-right: 20px;
}
.item:hover {
  background-color: rgb(23, 159, 251);
  color: #fff;
}
.active {
  background-color: rgb(23, 159, 251);
  color: #fff;
}
.fold {
  /* width: 50px; */
  color: rgb(23, 159, 251);
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
</style>
